<template>
    <container class="text-compare">
        <toolbar></toolbar>

        <el-card class="main">
            <operation>
                <base-select slot="right" class="select"
                             v-model="selectLanguage"
                             :options="languageOptions"
                             size="mini"></base-select>
            </operation>

            <space height="20px"></space>

            <monaco-diff-editor :original.sync="original"
                                :modified.sync="modified"
                                :lang="selectLanguage"
                                height="80vh"></monaco-diff-editor>
        </el-card>

    </container>
</template>

<script type="text/ecmascript-6">
  import Container from "../../components/common/Container";
  import Toolbar from "../../components/common/Toolbar";
  import Operation from "../../components/common/Operation";
  import BaseSelect from "../../components/common/BaseSelect";
  import MonacoDiffEditor from "../../components/editor/MonacoDiffEditor/index";
  import Space from "../../components/common/Space";
  import { arrayToOptions } from "../../utils/js/convert";
  import { languages } from "monaco-editor";

  /**
   * @author 白雨浓
   * @date 2019/7/9 17:23
   *
   * 文本比对
   **/
  export default {
    name: 'TextCompare',
    components: {Space, MonacoDiffEditor, BaseSelect, Operation, Toolbar, Container},
    data() {
      return {
        selectLanguage: 'text',
        languageOptions: arrayToOptions(languages.getLanguages(), 'id', 'id'),
        original: '',
        modified: '',
      }
    },
    mounted() {
    },
    methods: {}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .text-compare {
    }

    .main {
        width 98%
        margin 20px auto
    }

    .select {
        width 200px
    }
</style>
